<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/newbase.css">
    <title>我的钱包积分</title>
    <style>
        .tip{
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 12px;
            background: rgba(0,0,0,0.3);
            padding: 1% 4%;
            color: white;
        }
    </style>
</head>
{include file="public/href" /}
<body>
<div class="wrap-jf">
    <div class="header">
        <p>我的钱包</p>
        <img src="__STATIC__/img/back.png" class="back" onclick="back_url();">
        <span><a href="{:url('mobile/user_info/integral_rule')}">积分规则</a></span>
    </div>

    <div class="center">
        <div class="main">
            <img src="__STATIC__/img-new/new-bg2.png">
            <span class="cur">可用积分<span id="integral" style="font-size: 30px;display: block;">{$integral|default='0'}</span></span>
        </div>
        <ul class="list">
            <li class="num"><a href="{:url('mobile/user_info/exchange_record')}"><span>兑换记录</span></a></li>
            <li class="num"><a href="{:url('mobile/user_info/integral_details')}"><span>积分明细</span></a></li>
            <li><a href="{:url('mobile/user_info/get_integral')}"><span>赚取积分</span></a></li>
        </ul>
    </div>
    <div class="content">
        <div>
            <p>兑换专区</p>
        </div>
    </div>
    <ul class="list" id="show">
    </ul>
</div>
{include file="public/src" /}
<script>
    // 返回
    function back_url() {
        var url = sessionStorage.getItem('integral_index');
        window.location.href = url;

    }

    //layer流加载
    layui.use('flow', function() {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '#show' //流加载容器
            ,isAuto:true
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                $.ajax({
                    url:"{:url('mobile/user_info/integral_index')}",
                    dataType:'json',
                    type:'post',
                    data:{'page':page},
                    success:function(t){
                        console.log(t);

                        layui.each(t.data, function(index, item){
                            var text = '<p class="tip">库存 '+item.number+'</p>';
                            if (item.number <= 0){
                                text = '<p class="tip">库存不足</p>'
                            }

                            lis.push('<li><div class="goods">' +
                                '<img src="/'+item.picUrl+'" style="height: 180px;">' +
                                    text +
                                '</div>' +
                                '<a href="#"><h4>'+item.title+'</h4></a>' +
//                                '<div style="font-size: 12px;width: 90%;margin: 0 auto;color: #212121;line-height: 20px;">市场价：'+item.market_price+'</div>' +
                                '<div class="jifen">积分: <font id="price_'+item.id+'">'+parseInt(item.price)+'</font>' +
                                ' <p onclick="exchange('+item.id+')">兑换</p>' +
                                '<input type="hidden" id="num_'+item.id+'" value="'+item.number+'" /></div></li>');
                        });
                        next(lis.join(''), page < t.pages);
                    },
                    error: function () {
                        layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                    }
                })
            }
        });
    });
    //执行兑换
    function exchange(id){
        var integral = parseInt($('#integral').text());
        var price = parseInt($('#price_'+id).text());
        var number = $('#num_'+id).val();
        if (integral < price){
            layer.open({content:'积分不足换取此商品',skin:'msg',time:2});
            return false;
        }else if (number <= 0){
            layer.open({content:'库存不足,无法兑换',skin:'msg',time:2});
            return false;
        }else{
            window.location.href = "{:url('mobile/user_info/integral_exchange')}?goods_id="+id;

        }
    }
</script>
</body>
</html>